<!--开启页面选项卡后，显示为选项卡标题-->
<title>后台管理员</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>用户</cite></a>
    <a><cite>后台管理员</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button id="LAY-user-add" class="layui-btn" lay-event="add">
          <i class="layui-icon layui-icon-add-1"></i>
          添加管理员
        </button>
      </div>

      <table id="LAY-user-manage" lay-filter="LAY-user-manage"></table>
      <script type="text/html" id="LAY-user-operate">
        <a class="layui-table-link" lay-event="reset"><i
          class="layui-icon layui-icon-password"></i>重置密码</a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-red" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>

<script>
  layui.define(['table', 'form'], function (exports) {
    let $ = layui.$
      , table = layui.table
      , view = layui.view
      , admin = layui.admin
      , form = layui.form
    let resourceUrl = 'agent-admin/users'
    //用户管理
    table.render({
      elem: '#LAY-user-manage'
      , url: resourceUrl
      , cols: [[
        {field: 'username', title: '登录用户名', width: 100}
        , {title: '角色', width: 100, templet: '<span>{{ d.role.value }}</span>'}
        , {field: 'created_at', title: '添加时间', minWidth: 200}
        , {title: '操作', width: 300, align: 'left', fixed: 'right', toolbar: '#LAY-user-operate'}
      ]]
    });

    //加载角色数据
    let loadRole = function (callback) {
      admin.get('agent-admin/roles', function (res) {
        callback(res.data);
      });
    }

    let showAddForm = function (data) {
      let title = '添加用户'
        , height = '400px';
      if (data) {
        title = '修改用户';
        height = '300px';
      }
      loadRole(function (roles) {
        data = data || {};
        data.roles = roles;
        admin.popup({
          title: title
          , area: ['500px', height]
          , id: 'LAY-popup-user-add'
          , success: function (layero, index) {
            view(this.id).render('_base/user/user/form', data).done(function () {
              form.render(null, 'LAY-user-form');
              //监听提交
              form.on('submit(LAY-user-submit)', function (data) {
                let field = data.field; //获取提交的字段
                if (field.password !== field.verify_password) {
                  layer.msg('两次输入的密码不一致');
                  return;
                }
                //提交 Ajax 成功后，关闭当前弹层并重载表格
                admin.post(resourceUrl, field, function (res) {
                  layui.table.reload('LAY-user-manage'); //重载表格
                  layer.close(index); //执行关闭
                })
              });
            })
          }
        });
      })
    }

    //监听工具条
    table.on('tool(LAY-user-manage)', function (obj) {
      let data = obj.data;
      if (obj.event === 'edit') {
        showAddForm(data);
      } else if (obj.event === 'del') {
        layer.confirm('确认删除该数据?', function (index) {
          admin.del(resourceUrl, data.id, function (res) {
            layer.close(index);
            layui.table.reload('LAY-user-manage'); //重载表格
          })
        });
      } else if (obj.event === 'reset') {
        admin.popup({
          title: '重置密码'
          , area: ['400px', '350px']
          , id: 'LAY-popup-user-reset'
          , success: function (layero, index) {
            view(this.id).render('_base/user/user/reset', data).done(function () {
              form.render(null, 'LAY-user-reset-form');
              //监听提交
              form.on('submit(LAY-user-reset-submit)', function (data) {
                let field = data.field; //获取提交的字段
                if (field.password !== field.verify_password) {
                  layer.msg('两次输入的密码不一致');
                  return;
                }
                //提交 Ajax 成功后，关闭当前弹层并重载表格
                admin.post(resourceUrl + '/resetPassword', field, function (res) {
                  layer.close(index); //执行关闭
                })
              });
            });
          }
        });
      }
    });
    $('#LAY-user-add').click(function () {
      showAddForm();
    });
  })
</script>
